<!--
  THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=effectScatter-bmap
-->
<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
  <head>
    <meta charset="utf-8" />
  </head>
  <body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>

    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"
    ></script>

    <!-- Uncomment this line if you want to dataTool extension-->
    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/extension/dataTool.min.js"
    ></script>

    <!-- Uncomment this line if you want to use gl extension-->
    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"
    ></script>

    <!-- Uncomment this line if you want to echarts-stat extension-->
    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"
    ></script>

    <!-- Uncomment this line if you want to use map -->
    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/map/js/china.js"
    ></script>
    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/map/js/world.js"
    ></script>

    <!-- Uncomment these two lines if you want to use bmap extension -->
    <script
      type="text/javascript"
      src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=ifE0YvqOw4HOjgIyFUO7gP5XmBdr1sWV"
    ></script>
    <script
      type="text/javascript"
      src="https://api.map.baidu.com/api?v=3.0&ak=ifE0YvqOw4HOjgIyFUO7gP5XmBdr1sWV"
    ></script>
    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/extension/bmap.min.js"
    ></script>

    <script type="text/javascript">
      var app = {};

      const data = [
        { name: "海门", value: 9 },
        { name: "鄂尔多斯", value: 12 }
      ];
      const geoCoordMap = {
        海门: [121.15, 31.89],
        鄂尔多斯: [109.781327, 39.608266]
      };
      const convertData = function(data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value)
            });
          }
        }
        return res;
      };
      var option = {
        title: {
          text: "全国主要城市空气质量 - 百度地图",
          subtext: "data from PM25.in",
          sublink: "http://www.pm25.in",
          left: "center"
        },
        tooltip: {
          trigger: "item"
        },
        bmap: {
          center: [103.715949, 29.075551],
          zoom: 17.5,
          roam: true
        },
        series: [
          {
            name: "pm2.5",
            type: "scatter",
            coordinateSystem: "bmap",
            data: convertData(data),
            symbolSize: function(val) {
              return val[2] / 10;
            },
            encode: {
              value: 2
            },
            label: {
              formatter: "{b}",
              position: "right",
              show: false
            },
            emphasis: {
              label: {
                show: true
              }
            }
          },
          {
            name: "Top 5",
            type: "effectScatter",
            coordinateSystem: "bmap",
            data: convertData(
              data
                .sort(function(a, b) {
                  return b.value - a.value;
                })
                .slice(0, 6)
            ),
            symbolSize: function(val) {
              return val[2] / 10;
            },
            encode: {
              value: 2
            },
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke"
            },
            label: {
              formatter: "{b}",
              position: "right",
              show: true
            },
            itemStyle: {
              shadowBlur: 10,
              shadowColor: "#333"
            },
            emphasis: {
              scale: true
            },
            zlevel: 1
          }
        ]
      };

      var dom = document.getElementById("container");
      var myChart = echarts.init(dom);
      //debugger;
      myChart.setOption(option);

      window.addEventListener("resize", myChart.resize);

      var map11 = myChart
        .getModel()
        .getComponent("bmap")
        .getBMap();
      map11.addControl(new BMap.MapTypeControl());

      map11.setMinZoom(16);
      map11.setMinZoom(18);

      //bmap.setMapType(BMAP_EARTH_MAP);
      //bmap.addControl(new BMap.MapTypeControl());
      //var point1 = new BMapGL.Point(103.714949, 29.076251);
      var point1 = new BMapGL.Point(103.715949, 29.075551);
      var point2 = new BMapGL.Point(103.715249, 29.076051);
      var marker1 = new BMapGL.Marker(point1);
      var marker2 = new BMapGL.Marker(point2);
      // 在地图上添加点标记
      map11.addOverlay(marker1);
      map11.addOverlay(marker2);

      // 信息窗口1
      var opts1 = {
        width: 200, // 信息窗口宽度
        height: 70, // 信息窗口高度
        title: "监测点一", // 信息窗口标题
        message: "监测点一"
      };
      var infoWindow1 = new BMapGL.InfoWindow(
        "点击监测点一跳转到对应的数据监测页面",
        opts1
      ); // 创建信息窗口对象
      // 信息窗口2
      var opts2 = {
        width: 200, // 信息窗口宽度
        height: 70, // 信息窗口高度
        title: "监测点二", // 信息窗口标题
        message: "监测点二"
      };
      var infoWindow2 = new BMapGL.InfoWindow(
        "点击监测点二跳转到对应的数据监测页面",
        opts2
      ); // 创建信息窗口对象
      map11.openInfoWindow(infoWindow1, point1); //开启信息窗口
      map11.openInfoWindow(infoWindow2, point2); //开启信息窗口
    </script>
  </body>
</html>
